
  var myChart = echarts.init(document.getElementById('main'));
  var myChart2 = echarts.init(document.getElementById('main2'));
  var myChart3 = echarts.init(document.getElementById('main3'));
  var myChart4 = echarts.init(document.getElementById('main4'));
  var myChart5 = echarts.init(document.getElementById('main5'));
  var myChart6 = echarts.init(document.getElementById('main6'));
  var myChart7 = echarts.init(document.getElementById('main7'));
  var myChart8 = echarts.init(document.getElementById('main8'));
  var myChart9 = echarts.init(document.getElementById('main9'));
  var myChart10 = echarts.init(document.getElementById('main10'));

var labelTop = {
    normal : {
        label : {
            show : false,
            position : 'center',
            formatter : '{b}'+1223,
           /* textStyle: {
                baseline : 'bottom'
            }*/
        },
     /*   labelLine : {
            show : false
        }*/
    }
};
var labelBottom = {
    normal : {
        label : {
            show : true,
            position : 'center'
        },

    },
    emphasis: {
         label : {
            show : true,
            position : 'center'
        },
    }
};

var option = {
    color:['#1890FF','#ffcd1a'],
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)",
        position:function(exy){
            return exy
        }
    },
    title : {
        text: '有效客户数',
        x:'left',
        textStyle : {
            color : '#767676',
            fontFamily : '微软雅黑',
            fontSize : 14,
            fontWeight : 'bolder'
        }
    },
    legend: {
        x:'center',
        y:"bottom",
        itemWidth:6,
        itemHeight:6,
        data:['本地','招行']
    },
    calculable : true,
    series : [
        {
            name:'有效客户数',
            type:'pie',
            radius : ['44%', '60%'],
            itemStyle : {
                normal : {
                    label : {
                        show : true,
                        position : 'center',
                        textStyle : {
                            color:"#565656",
                            fontSize:16
                        },
                        formatter : function(){
                            var da = option.series[0].data;
                            var total = 0;
                            for(var i = 0 ; i< da.length;i++){
                              total+=da[i].value
                            }
                            return total+"\r\n"
                        },
                    }
                },
                emphasis : {
                    label : {
                        show : false,
                    }
                }
            },
            data:[
                {name:"本地", value:12600,itemStyle:labelTop},
                {name:'招行', value:5310,itemStyle:labelBottom}
             
            ]
        }
    ]
};
                    

var option2 = {
    color:['#2FC25B','#ffcd1a'],
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    title : {
        text: '新增客户数',
        x:'left',
        textStyle : {
            color : '#767676',
            fontFamily : '微软雅黑',
            fontSize : 14,
            fontWeight : 'bolder'
        }
    },
    legend: {
        x:'center',
        y:"bottom",
        itemWidth:6,
        itemHeight:6,
        data:['本地','招行']
    },
    calculable : true,
    series : [
        {
            name:'新增客户数',
            type:'pie',
               radius : ['44%', '60%'],
            itemStyle : {
                normal : {
                      label : {
                        show : true,
                        position : 'center',
                        textStyle : {
                            color:"#565656",
                            fontSize:16
                        },
                        formatter : function(){
                            var da = option2.series[0].data;
                            var total = 0;
                            for(var i = 0 ; i< da.length;i++){
                              total+=da[i].value
                            }
                            return total+"\r\n"
                        },

                    }
                },
                emphasis : {
                    label : {
                        show : false,
                    }
                }
            },
            data:[
                {value:335, name:'本地',itemStyle:labelTop},
                {value:70, name:'招行',itemStyle:labelBottom},
             
            ]
        }
    ]
};

var option3 = {
    color:['#ff7884','#ffcd1a'],
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    title : {
        text: '流失客户数',
        x:'left',
        textStyle : {
            color : '#767676',
            fontFamily : '微软雅黑',
            fontSize : 14,
            fontWeight : 'bolder'
        }
    },
    legend: {
        x:'center',
        y:"bottom",
        itemWidth:6,
        itemHeight:6,
        data:['本地','招行']
    },
    calculable : true,
    series : [
        {
            name:'流失客户数',
            type:'pie',
            startAngle:20,
              radius : ['44%', '60%'],
            itemStyle : {
               normal : {
                      label : {
                        show : true,
                        position : 'center',
                        textStyle : {
                            color:"#565656",
                            fontSize:16
                        },
                        formatter : function(){
                            var da = option3.series[0].data;
                            var total = 0;
                            for(var i = 0 ; i< da.length;i++){
                              total+=da[i].value
                            }
                            return total+"\r\n"
                        },
                    }
                },
                emphasis : {
                    label : {
                        show : false,
                    }
                }
            },
            data:[
                {value:435, name:'本地',itemStyle:labelTop},
                {value:470, name:'招行',itemStyle:labelBottom},
             
            ]
        }
    ]
};
var  option4 = {
    color:['#2FC25B','#98e0ad'],
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)",
         position:function(exy){
            return exy
        }
    },
    title : {
        text: '有效客户占比',
        x:'left',
        textStyle : {
            color : '#767676',
            fontFamily : '微软雅黑',
            fontSize : 14,
            fontWeight : 'bolder'
        }
    },
    legend: {
        x:'center',
        y:"bottom",
        itemWidth:6,
        itemHeight:6,
        data:['机构','个人']
    },
    calculable : true,
    series : [
        {
            name:'有效客户占比',
            type:'pie',
              radius : ['44%', '60%'],
            itemStyle : {
                 normal : {
                      label : {
                        show : true,
                        position : 'center',
                        textStyle : {
                            color:"#565656",
                            fontSize:12
                        },
                        formatter : '客户类别\r\n',

                    }
                },
                emphasis : {
                    label : {
                        show : false,
                    }
                }
            },
            data:[
                {value:335, name:'机构',itemStyle:labelTop},
                {value:70, name:'个人',itemStyle:labelBottom},
             
            ]
        }
    ]
};

var option5 =  {
    color:['#1890FF','#ffcd1a','#2FC25B'],
    title : {
        text: '有效客户数分布情况',
        x:'left',
        textStyle : {
            color : '#767676',
            fontFamily : '微软雅黑',
            fontSize : 14,
            fontWeight : 'bolder'
        }
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)",
        position:function(exy){
            return exy
        }
    },
    legend: {
        x:'center',
        y:"bottom",
        itemWidth:6,
        itemHeight:6,
        data:['对公','零售','海外业务管理部']
    },
    calculable : true,
    series : [
        {
            name:'客户占比',
            type:'pie',
            radius: ['47%', '70%'],
            itemStyle : {
               normal : {
                      label : {
                        show : true,
                        position : 'center',
                        textStyle : {
                            color:"#565656",
                            fontSize:16
                        },
                        formatter : function(){
                            var da = option3.series[0].data;
                            var total = 0;
                            for(var i = 0 ; i< da.length;i++){
                              total+=da[i].value
                            }
                            return total
                        },
                    }
                }
            },
            data:[
                {value:1335, name:'对公',itemStyle:labelTop},
                {value:2310, name:'零售',itemStyle:labelBottom},
                {value:934, name:'海外业务管理部',itemStyle:labelTop},
            ]
        }
    ]
};
                    
                                   
var option6 = {
    color:['#1890FF','#ffcd1a','#2FC25B'],
    title : {
        text: '有效客户增长率对比趋势',
        textStyle : {
            color : '#767676',
            fontFamily : '微软雅黑',
            fontSize : 14,
            fontWeight : 'bolder'
        }
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        x:'center',
        y:"bottom",
        data:['比上月增长率','比年初增长率','比去年同期增长率']
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : true,
            axisLine: {
                lineStyle: {
                    color: '#767676'
                },
                interval:4
            },
            splitLine:{
                show:false
            },
            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
        }
    ],
    yAxis : [
        {
            type : 'value',
            boundaryGap : false,
             name: "值(%)",
            axisLabel : {
                formatter: '{value}'
            },
            splitLine:{
                show:true,
                lineStyle:{
                    color: ['#ccc'],
                    width: 1,
                    type: 'dashed'
                } 
            },
             axisLine: {
                lineStyle: {
                    color: '#767676'
                },
                 interval:4
            },
        }
    ],
    series : [
        {
            name:'比上月增长率',
            type:'line',
            smooth:true,
            data:[61, 71, 55, 73, 52, 53, 30, 31, 95, 43, 22, 13],
        },
        {
            name:'比年初增长率',
            type:'line',
             smooth:true,
            data:[12, 22, 42, 15, 53, 22, 20, 22, 82, 15, 53, 22],
        },
          {
            name:'比去年同期增长率',
            type:'line',
             smooth:true,
            data:[42, 72, 22, 15, 63, 12, 25, 52, 22, 15, 63, 12],
        }
    ]
};
var  option7 = {
    color:['#1890FF','#72ccfc'],
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    title : {
        text: '机构类别',
        x:'left',
        show:false
    },
    legend: {
        x:'center',
        y:"bottom",
        itemWidth:6,
        itemHeight:6,
        data:['同业','非同业']
    },
    calculable : true,
    series : [
        {
            name:'机构类别',
            type:'pie',
               radius : ['44%', '60%'],
            itemStyle : {
                normal : {
                      label : {
                        show : true,
                        position : 'center',
                        textStyle : {
                            color:"#565656",
                            fontSize:12
                        },
                        formatter : '机构类别\r\n',

                    }
                },
                emphasis : {
                    label : {
                        show : false,
                    }
                }
            },
            data:[
                {value:335, name:'同业',itemStyle:labelTop},
                {value:70, name:'非同业',itemStyle:labelBottom},
             
            ]
        }
    ]
    };
var  option8 = {
    color:['#1890FF','#ffcd1a','#2FC25B'],
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },

    legend: {
        orient : 'vertical',
        x:'right',
        y:"center",
        itemWidth:6,
        itemHeight:6,
        data:['公司银行部','交易银行部','金融机构部']
    },
    calculable : true,
    series : [
        {
            name:'客户分布占比',
            type:'pie',
            center : ['29%', '59%'],
            hoverAnimation:false,
            itemStyle : {
                normal : {
                    label : {
                        position : 'inner',
                        formatter : function (params) {                         
                          return (params.percent - 0).toFixed(0) + '%'
                        }
                    },
                    labelLine : {
                        show : false
                    }
                },
                emphasis : {
                    label : {
                        position : 'inner',
                        formatter :'{c}'
                    },
                }
            },
            data:[
                {value:70, name:'交易银行部'},
                {value:335, name:'公司银行部'},
                {value:120, name:'金融机构部'},
             
            ]
        }
    ]
};
var  option9 = {
    color:['#ffcd1a','#1890FF'],
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },

    legend: {
        orient : 'vertical',
        x:'right',
        y:"center",
        itemWidth:6,
        itemHeight:6,
        data:['零售银行部','私人银行及\n财富管理部']
    },
    calculable : true,
    series : [
        {
            name:'客户分布占比',
            type:'pie',
            center : ['29%', '59%'],
            hoverAnimation:false,
            itemStyle : {
                normal : {
                    label : {
                        position : 'inner',
                        formatter : function (params) {                         
                          return (params.percent - 0).toFixed(0) + '%'
                        }
                    },
                    labelLine : {
                        show : false
                    }
                },
                emphasis : {
                    label : {
                        position : 'inner',
                        formatter :'{c}'
                    },
                }
            },
            data:[
                {value:45, name:'零售银行部'},
                {value:320, name:'私人银行及\n财富管理部'},
             
            ]
        }
    ]
};          
var colorList = ['#5ea5f3','#31c25b','#72ccfc','#98e0ad'];

var option10 = {
    color:['#5ea5f3','#31c25b','#72ccfc','#98e0ad'],
    title: {
        text: '每月新增与流失客户趋势',
        subtext: '数据来源至永隆官方(点击访问)',
        sublink: 'https://www.cmbwinglungbank.com',
        textStyle : {
            color : '#767676',
            fontFamily : '微软雅黑',
            fontSize : 14,
            fontWeight : 'bolder'
        }
    },
    tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(0,0,0,0.7)',
        axisPointer: {
            type: 'shadow'
        },
   /*     formatter: function(params) {
            // for text color
            var color = colorList[params[0].dataIndex];
            var res = '<div style="color:' + color + '">';
            res += '<strong>' + params[0].name + '消费（元）</strong>'
            for (var i = 0, l = params.length; i < l; i++) {
                res += '<br/>' + params[i].seriesName + ' : ' + params[i].value 
            }
            res += '</div>';
            return res;
        }*/
    },
    legend: {
        x: 'right',
        data:['本地新增','招行新增','本地流失','招行流失']
    },
    calculable: true,
    grid: {
        y: 80,
        y2: 40,
        x2: 40
    },
    xAxis: [
        {
            type: 'category',
            data: ['2018.1', '2018.2', '2018.3', '2018.4', '2018.5', '2018.6', '2018.7', '2018.8', '2018.9', '2018.10', '2018.11', '2018.12']
        }
    ],
    yAxis: [
        {
            type: 'value',
            splitLine:{
                show:true,
                lineStyle:{
                    color: ['#ccc'],
                    width: 1,
                    type: 'dashed'
                } 
            },
        },
        {
            type: 'value',
            splitLine:{
                show:true,
                lineStyle:{
                    color: ['#ccc'],
                    width: 1,
                    type: 'dashed'
                } 
            },
        }
        
    ],
    series: [
        {
            name: '本地新增',
            type: 'bar',
            data: [1332.1,908,871.8,1983.7,1627.6,499.2,1444.3,1332.1,908,871.8,1983.7,1627.6]
        },
        {
            name: '招行新增',
            type: 'bar',
            data: [1405,1023.2,969,2149.7,1851.7,581.3,1674.7,1405,1023.2,969,2149.7,1851.7]
        },
        {
            name: '本地流失',
            type: 'bar',
            yAxisIndex: 1,
            data: [148.3,111.1,106.7,245.5,203.5,65.1,182.4,148.3,111.1,106.7,245.5,203.5]
        },
        {
            name: '招行流失',
            type: 'bar',
            data: [175.1,115.1,118.3,236.9,294,69.4,102,175.1,121.1,118.3,276.9,224]
        }
    ]
};
                                                                                            
        myChart.setOption(option);
        myChart2.setOption(option2);
        myChart3.setOption(option3);
        myChart4.setOption(option4);
        myChart5.setOption(option5);
        myChart6.setOption(option6);
        myChart7.setOption(option7);
        myChart8.setOption(option8);
        myChart9.setOption(option9);
        myChart10.setOption(option10);

var startNum = 0;
function ajaxDate(y,m,startNum,url){
  dataY = y;
  dataM = m;
  $.ajax({
      url:url,
      dataType:"json",
      data:{'date':dataY+dataM},
      type:"GET",
      beforeSend:function(){
      },
      success:function(data){
         var department = data.Biz_Statis_Blng
         var dept = department
         console.log(data);
              for(var i=0;i<dept.length;i++){
                if(dept[i]=="ALL"){
                  dept[i]="全行";
                }else
                  if(dept[i]=="OSBK"){
                  dept[i]="海外業務管理部";
                }else if(dept[i]=="CORP"){
                  dept[i]="對公";
                }else if(dept[i]=="PWD"){
                  dept[i]="私人銀行及財富管理部";
                }else if(dept[i]=="PBD"){
                  dept[i]="零售銀行部";
                }else if(dept[i]=="RTBK"){
                  dept[i]="零售";
                }else if(dept[i]=="TCO"){
                  dept[i]="交易銀行部";
                }else if(dept[i]=="TCP"){
                  dept[i]="公司銀行部";
                }else if(dept[i]=="TFI"){
                  dept[i]="金融機構部";
                }
              }
           if(dept){
              var navDepartments =$('#nav-departments');
              navDepartments.html("");
              var urlhash = window.location.hash;
              var depali;
              
              for(var i=0;i<dept.length;i++){
            	  if(i==0||i==1||i==2||i==5){
                  depali = " <li data-id="+i+"><a href="+"#"+i+">"+dept[i]+"</a></li>"
                if(urlhash == "#"+i){
                  depali = " <li class='active' data-id="+i+"><a href="+"#"+i+">"+dept[i]+"</a></li>"
                }
            	  
                if(!urlhash){
                   if(i==0){
                     depali = " <li class='active' data-id="+i+"><a href="+"#"+i+">"+dept[i]+"</a></li>"
                   }  
                }
                navDepartments.append(depali);
                 
              }
              }
              mui('.select-nav-depart li').on('tap','a',function(){
				  var a = document.createElement('a');
				  a = this.cloneNode(true);
				  a.click();
					window.location.href = this.href;
				  }); 
              $("#nav-departments li").on("tap",function(e){
                $("#nav-departments li").removeClass("active")
                $(this).addClass("active")
                startNum = Number(this.dataset.id)
                ajaxDate(dataY,dataM,startNum,"http://10.150.5.248:8080/MobileBI/ViewCustStruDashBoard1.action")

              })
              
                  option.series[0].data[0].value=data.Cmb_Ind_N[0+startNum]
                  option.series[0].data[1].value=data.Cmb_Ind_Y[0+startNum]
                  myChart.setOption(option);
                  option2.series[0].data[0].value=data.session2.Inc_Cust_Qty_Y[Number(dataM)*(1+startNum)]
                  option2.series[0].data[1].value=data.session2.Inc_Cust_Qty_N[Number(dataM)*(1+startNum)]
                  myChart2.setOption(option2);
                  option3.series[0].data[0].value=data.session2.Wst_Cust_Qty_Y[Number(dataM)*(1+startNum)]
                  option3.series[0].data[1].value=data.session2.Wst_Cust_Qty_N[Number(dataM)*(1+startNum)]
                  myChart3.setOption(option3);
                  option4.series[0].data[0].value=data.Cust_Type_R[0+startNum]
                  option4.series[0].data[1].value=data.Cust_Type_C[0+startNum]
                  myChart4.setOption(option4);
                  option7.series[0].data[0].value=data.Dept_Ind_Y[0+startNum]
                  option7.series[0].data[1].value=data.Dept_Ind_N[0+startNum]
                  myChart7.setOption(option7);
                  option5.series[0].data[0].value=data.Final_Cust_Qty[0]
                  option5.series[0].data[1].value=data.Final_Cust_Qty[5]
                  option5.series[0].data[2].value=data.Final_Cust_Qty[2]
                  myChart5.setOption(option5);
                  option8.series[0].data[0].value=data.Final_Cust_Qty[6]
                  option8.series[0].data[1].value=data.Final_Cust_Qty[7]
                  option8.series[0].data[2].value=data.Final_Cust_Qty[8]
                  myChart8.setOption(option8);
                  option9.series[0].data[0].value=data.Final_Cust_Qty[3]
                  option9.series[0].data[1].value=data.Final_Cust_Qty[4]
                  myChart9.setOption(option9);
                  option6.xAxis[0].data=data.session2.STATIS_MO.slice(startNum*12,(startNum+1)*12)
                  option6.series[0].data=data.session2.Net_Inc_Rate.slice(startNum*12,(startNum+1)*12)
                  option6.series[1].data=data.session2.Year_Inc_Rate.slice(startNum*12,(startNum+1)*12)
                  option6.series[2].data=data.session2.Last_Year_Inc_Rate.slice(startNum*12,(startNum+1)*12)
                  myChart6.setOption(option6);
                  option10.xAxis[0].data=data.session2.STATIS_MO.slice(startNum*12,(startNum+1)*12)
                  option10.series[0].data=data.session2.Inc_Cust_Qty_Y.slice(startNum*12,(startNum+1)*12)
                  option10.series[1].data=data.session2.Inc_Cust_Qty_N.slice(startNum*12,(startNum+1)*12)
                  option10.series[2].data=data.session2.Wst_Cust_Qty_Y.slice(startNum*12,(startNum+1)*12)
                  option10.series[3].data=data.session2.Wst_Cust_Qty_N.slice(startNum*12,(startNum+1)*12)
                  myChart10.setOption(option10);
           }
              
      },
      error:function(){
          console.log("加载data出错");

      }
  })

}        